<template>
    <div>
        <web-header show="theme" />

        <!-- 侧栏 -->
        <line-sidebar />

        <div class="breadcrumb"> 您当前的位置：
            <router-link to="/" :title="`${detail.title}旅游`" :alt="`${detail.title}旅游`">首页</router-link> &gt;
            <router-link to="/area" :title="`${detail.title}旅游`" :alt="`${detail.title}旅游`">目的地</router-link>
            &gt;
            <router-link to="/theme">主题游</router-link>
            &gt; <span>{{ detail.title }}</span>
        </div>
        <div class="big_box">
            <aside>
                <div class="box_c" @click="selectOpen()">
                    <li class="consult-right-box">
                        <div class="consult-right-box-img"> <img
                                src="https://admin.hqx.com.cn/Public/App/image/Vector-1.png" alt=""
                                style="width: 24px;">
                        </div>
                        <div class="consult-right-box-title">私人定制<span
                                class="consult-right-box-title-tip iconfont icon-youjiantou"></span> </div>
                        <div class="consult-right-box-name">说出你想怎么玩</div>
                    </li>
                    <li class="consult-right-box">
                        <div class="consult-right-box-img"> <img
                                src="https://admin.hqx.com.cn/Public/App/image/Vector-2.png" alt=""
                                style="width: 24px;">
                        </div>
                        <div class="consult-right-box-title">包团定制<span
                                class="consult-right-box-title-tip iconfont icon-youjiantou"></span> </div>
                        <div class="consult-right-box-name">定制团队出行线路</div>
                    </li>
                    <li class="consult-right-box">
                        <div class="consult-right-box-img"> <img
                                src="https://admin.hqx.com.cn/Public/App/image/Vector-3.png" alt=""
                                style="width: 19px;">
                        </div>
                        <div class="consult-right-box-title">在线咨询<span
                                class="consult-right-box-title-tip iconfont icon-youjiantou"></span> </div>
                        <div class="consult-right-box-name">24小时在线咨询</div>
                    </li>
                </div>
                <div id="left3"></div>
                <el-affix target=".big_box" :offset="140">
                    <div class="box_b left3 box_new" v-if="list.length != 0">
                        <div class="box-new-name">
                            <span class="iconfont icon-edu-rementuijian" style="color: red; padding-right: 2px"></span>
                            热门推荐
                        </div>
                        <div class="bottom">
                            <div v-for="(item, index) in recommendList" :key="item.id">
                                <router-link v-if="index < list.length" :to="`/details/${item.id}`"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`">

                                    <img :src="item.picture" alt="" class="box-new-img">
                                    <div class="box-new-title clamp-line-2">{{ item.title }}</div>
                                    <div style="padding-bottom: 2px;">
                                        <span style="font-weight:bold; color: #FF5454; font-size: 16px;">{{ item.price
                                            }}/人
                                            <span style="font-size: 10px; font-weight: 400;">起</span></span>
                                    </div>
                                </router-link>
                            </div>
                        </div>
                    </div>
                </el-affix>

            </aside>
            <div class="right_box">
                <a class="banner" href="javascript:void(0)" v-if="detail.banner">
                    <img :src="`https://admin.hqx.com.cn/Public/Uploads/${detail.banner}`" width="100%;" />
                </a>
                <div class="screen">
                    <div class="top">
                        <ul id="line_typeArr">
                            <li><a @click="changeList('line_type', '')" :class="data.line_type == '' ? 'active' : ''"
                                    :title="`${detail.title}旅游`" :alt="`${detail.title}旅游`"
                                    href="javascript:void(0)">所有线路</a></li>
                            <li><a @click="changeList('line_type', 1)" :class="data.line_type == 1 ? 'active' : ''"
                                    :title="`${detail.title}旅游`" :alt="`${detail.title}旅游`"
                                    href="javascript:void(0)">跟团旅游</a></li>
                            <li><a @click="changeList('line_type', 2)" :class="data.line_type == 2 ? 'active' : ''"
                                    :title="`${detail.title}旅游`" :alt="`${detail.title}旅游`"
                                    href="javascript:void(0)">定制旅行</a></li>
                            <li><a @click="changeList('line_type', 5)" :class="data.line_type == 5 ? 'active' : ''"
                                    :title="`${detail.title}旅游`" :alt="`${detail.title}旅游`"
                                    href="javascript:void(0)">包团旅游</a></li>
                            <li><a @click="changeList('line_type', 3)" :class="data.line_type == 3 ? 'active' : ''"
                                    :title="`${detail.title}旅游`" :alt="`${detail.title}旅游`"
                                    href="javascript:void(0)">当地玩乐</a></li>
                        </ul>
                    </div>
                    <div class="bottom">
                        <ul class="screen-tabs">
                            <li style="width: 80px;"><span class="iconfont icon-yuandian1 dot"></span>目的地：</li>
                            <li v-for="item in destination.mdd" :key="item.id" @click="changeList('theme', item.id)">
                                <a :style="{ 'color': item.id == data.plays ? '#007AFF' : '' }"
                                    :title="`${item.title}旅游`" :alt="`${item.title}旅游`" href="javascript:void(0)">{{
                                        item.title
                                    }}</a>
                            </li>
                        </ul>

                        <dl>
                            <dt><span class="iconfont icon-yuandian1 dot"></span>游玩天数：</dt>
                            <dd id="line_daysArr">
                                <a @click="changeList('days', '')" :title="`${detail.title}旅游`"
                                    :alt="`${detail.title}旅游`" href="javascript:void(0)">全部</a>
                                <a @click="changeList('days', 1)" :style="{ 'color': 1 == data.days ? '#007AFF' : '' }"
                                    :title="`${detail.title}旅游`" :alt="`${detail.title}旅游`"
                                    href="javascript:void(0)">1日游</a>
                                <a @click="changeList('days', 2)" :style="{ 'color': 2 == data.days ? '#007AFF' : '' }"
                                    :title="`${detail.title}旅游`" :alt="`${detail.title}旅游`"
                                    href="javascript:void(0)">2-4天</a>
                                <a @click="changeList('days', 3)" :style="{ 'color': 3 == data.days ? '#007AFF' : '' }"
                                    :title="`${detail.title}旅游`" :alt="`${detail.title}旅游`"
                                    href="javascript:void(0)">5-7天</a>
                                <a @click="changeList('days', 4)" :style="{ 'color': 4 == data.days ? '#007AFF' : '' }"
                                    :title="`${detail.title}旅游`" :alt="`${detail.title}旅游`"
                                    href="javascript:void(0)">8-11天</a>
                                <a @click="changeList('days', 5)" :style="{ 'color': 5 == data.days ? '#007AFF' : '' }"
                                    :title="`${detail.title}旅游`" :alt="`${detail.title}旅游`"
                                    href="javascript:void(0)">11天以上</a>
                            </dd>
                        </dl>
                        <dl>
                            <dt><span class="iconfont icon-yuandian1 dot"></span>价格范围：</dt>
                            <dd id="priceArr">
                                <a @click="changeList('prices', '')" :title="`${detail.title}旅游`"
                                    :alt="`${detail.title}旅游`" href="javascript:void(0)">全部</a>
                                <a @click="changeList('prices', 1)"
                                    :style="{ 'color': 1 == data.prices ? '#007AFF' : '' }" :title="`${detail.title}旅游`"
                                    :alt="`${detail.title}旅游`" href="javascript:void(0)">1000元以下</a>
                                <a @click="changeList('prices', 2)"
                                    :style="{ 'color': 2 == data.prices ? '#007AFF' : '' }" :title="`${detail.title}旅游`"
                                    :alt="`${detail.title}旅游`" href="javascript:void(0)">1000-3000元</a>
                                <a @click="changeList('prices', 3)"
                                    :style="{ 'color': 3 == data.prices ? '#007AFF' : '' }" :title="`${detail.title}旅游`"
                                    :alt="`${detail.title}旅游`" href="javascript:void(0)">3000-5000元</a>
                                <a @click="changeList('prices', 4)"
                                    :style="{ 'color': 4 == data.prices ? '#007AFF' : '' }" :title="`${detail.title}旅游`"
                                    :alt="`${detail.title}旅游`" href="javascript:void(0)">5000-1万元</a>
                                <a @click="changeList('prices', 5)"
                                    :style="{ 'color': 5 == data.prices ? '#007AFF' : '' }" :title="`${detail.title}旅游`"
                                    :alt="`${detail.title}旅游`" href="javascript:void(0)">1万元以上</a>
                            </dd>
                        </dl>
                    </div>
                </div>
                <div class="orders">
                    <div class="title">综合排序：</div>
                    <ul id="orderArr">
                        <li class="t1">
                            <a v-if="data.order != 3 && data.order != 4" @click="changeList('order', 4)"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">销量
                            </a>
                            <a v-else-if="data.order == 4" @click="changeList('order', 3)" class="t2"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">销量
                            </a>
                            <a v-else-if="data.order == 3" @click="changeList('order', 4)" class="t1"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">销量
                            </a>
                        </li>
                        <li class="t2">
                            <a v-if="data.order != 1 && data.order != 2" @click="changeList('order', 2)"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">价位
                            </a>
                            <a v-else-if="data.order == 2" @click="changeList('order', 1)" class="t2"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">价位
                            </a>
                            <a v-else-if="data.order == 1" @click="changeList('order', 2)" class="t1"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">价位
                            </a>
                        </li>
                        <li class="t3">
                            <!-- <a :title="`${detail.title}旅游`" :alt="`${detail.title}旅游`"
                                href="javascript:void(0)">人气
                            </a> -->
                            <a v-if="data.order != 5 && data.order != 6" @click="changeList('order', 6)"
                                :title="`${detail.title}旅游`" :alt="`${detail.title}旅游`" href="javascript:void(0)">人气
                            </a>
                            <a v-else-if="data.order == 6" @click="changeList('order', 5)" class="t2"
                                :title="`${detail.title}旅游`" :alt="`${detail.title}旅游`" href="javascript:void(0)">人气
                            </a>
                            <a v-else-if="data.order == 5" @click="changeList('order', 6)" class="t1"
                                :title="`${detail.title}旅游`" :alt="`${detail.title}旅游`" href="javascript:void(0)">人气
                            </a>
                        </li>
                        <li class="t4">
                            <!-- <a :title="`${detail.title}旅游`" :alt="`${detail.title}旅游`"
                                href="javascript:void(0)">最新
                            </a> -->
                            <a v-if="data.order != 7 && data.order != 8" @click="changeList('order', 8)"
                                :title="`${detail.title}旅游`" :alt="`${detail.title}旅游`" href="javascript:void(0)">最新
                            </a>
                            <a v-else-if="data.order == 8" @click="changeList('order', 7)" class="t2"
                                :title="`${detail.title}旅游`" :alt="`${detail.title}旅游`" href="javascript:void(0)">最新
                            </a>
                            <a v-else-if="data.order == 7" @click="changeList('order', 8)" class="t1"
                                :title="`${detail.title}旅游`" :alt="`${detail.title}旅游`" href="javascript:void(0)">最新
                            </a>
                        </li>
                    </ul>
                    <!-- <div class="nums">共发现 <strong>{$rows}</strong> 个宝贝！</div> -->
                </div>
                <div class="line_box" id="bigbox">
                    <div v-for="item in list" :key="item.id">
                        <lineItem :item='item'></lineItem>
                    </div>
                </div>
                <div class="page_a" @click="getList"> <a :title="destination.city + '旅游'" :alt="destination.city + '旅游'"
                        href="javascript:void(0)">
                        <div></div> {{ moreText }}
                    </a> </div>
            </div>
        </div>

        <new-footer />
        <back-top />
        <!-- <popup-consult ref="RefChild"></popup-consult> -->
        <popup-customization ref="RefChild"></popup-customization>

        <!-- 弹窗 -->
        <!-- 私人定制 -->
        <!-- 团队定制 -->
    </div>
</template>

<script setup>


import { area_details, line_items, area_Destination, theme_details, get_areas_list_theme } from "@/api/travel";
import { ref, reactive, onBeforeMount, onMounted, computed, onUpdated, watch } from "vue";
import { useRoute, RouterLink } from 'vue-router';
import lineItem from '@/components/list-item/lineItem.vue'
import lineSidebar from '@/components/sidebar/lineSidebar.vue'

const route = useRoute()
let fullPath = route.fullPath; // 保存当前路径
let data = ref({
    des: route.params.des || '', // 地区
    theme: Number(route.params.theme), // 主题
    area: '',//目的地
    line_type: '', //出游方式
    plays: '', //玩法
    prices: '', //价格范围
    days: '',
    order: 8, // 排序
    page: 1,
    limit: 10,
});
let list = ref([]);


let destination = ref({ fid: 1 }); // 所有信息 
let moreText = ref('展开更多精彩体验') // 展开更多
let detail = ref({}); // banner图
let recommendList = ref([]); // 推荐

// 获取子组件的引用
const RefChild = ref();

const selectOpen = () => {
    if (RefChild.value) {
        RefChild.value.open();
    }
}



// 初始化 
const initialize = async () => {
    fullPath = route.fullPath; // 保存当前路径
    // 初始化数据
    data.value = {
        des: route.params.des || '', // 地区
        theme: Number(route.params.theme), // 主题
        area: '',//目的地
        line_type: '', //出游方式
        plays: '', //玩法
        prices: '', //价格范围
        days: '',
        order: 8, // 排序
        page: 1,
        limit: 10,
    };
    list.value = [];
    moreText.value = '展开更多精彩体验';
    // 根据主题详情
    let res = await theme_details({ id: route.params.theme });
    detail.value = res.data;
    document.title = `${detail.value.title}旅游|主题旅行路线|深圳环球行官方网站`;
    // 请求主题相关城市
    let city = await get_areas_list_theme({ id: route.params.theme }); // 得到目的地区域父级信息
    destination.value.mdd = city.data;


    // 初始化列表
    await getList();

    // 获取推荐列表
    let res2 = await line_items({ limit: 4 });
    recommendList.value = res2.data;

}



// 翻页 持续获取list数据
const getList = async () => {
    if (moreText.value == '没有更多了') {
        return;
    }
    let res = await line_items(data.value);
    list.value = [...list.value, ...res.data];
    data.value.page++;
    if (res.data.length == 0) {
        moreText.value = '没有更多了';
    }

}

// 改变data.value时切换列表
const anewList = async () => {
    let res = await line_items(data.value);
    list.value = [...res.data];
    data.value.page = 2;
    moreText.value = res.data.length == 0 ? '没有更多了' : '展开更多精彩体验';
}


// data值改变
const changeList = (key, value) => {
    switch (key) {
        case 'line_type':
            data.value.line_type = value;
            break;
        case 'plays':
            data.value.plays = value;
            break;
        case 'theme':
            data.value.theme = value;
            break;
        case 'plays':
            data.value.plays = value;
            break;
        case 'prices':
            data.value.prices = value;
            break;
        case 'days':
            data.value.days = value;
            break;
        case 'order':
            data.value.order = value;
            break;
        default:
            break;
    }
    data.value.page = 1;
    anewList();
}


onMounted(async () => {
    initialize();
    // areasDomestic
    // areasForeign

});




</script>

<style lang="scss" scoped>
@import "../../css/main_line_listNew.css";
</style>
